<template>
    <div class="personal_container">
        <UserInfo @clickAvatar="onClickAvatar"></UserInfo>
        <SettingItem
            v-for="itemInfo in settingItemInfo" 
            :key="itemInfo.index"
            :itemInfo="itemInfo"></SettingItem>
    </div>
</template>

<script setup>
    import { reactive } from 'vue';
    import UserInfo from './UserInfo.vue';
    import SettingItem from './SettingItem.vue';
    const settingItemInfo = reactive([
        {
            id: 0,
            title:"修改个人信息",
        },
        {
            id: 1,
            title:"用户反馈",
        },
        {
            id: 2,
            title:"隐私保护说明",
        },
        {
            id: 3,
            title:"关于",
        },
        {
            id: 4,
            title:"退出登录",
        },
    ])

    function onClickAvatar() {
        alert("确定修改用户头像")
    }
</script>

<style scoped>
    .personal_container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

</style>